<template>
  <div class="changjing">
    <div class="flex">
      <div class="title">支持多种应用场景</div>
      <div class="sub">办公、游戏、金融支付、私有一机64挖</div>
    </div>

    <div class="list">
      <div class="item">
        <img src="@/assets/images/cj1.png" :style="{ marginLeft: offset1+'px' }" alt />
        <div id="changjing1" class="box">
          <div class="title">办公</div>
          <div class="sub">office</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/cj2.png" :style="{ marginRight: '-'+offset2+'px' }" alt />
        <div id="changjing2" class="box">
          <div class="title">游戏</div>
          <div class="sub">game</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/cj3.png" :style="{ marginLeft: offset3+'px' }" alt />
        <div id="changjing3" class="box">
          <div class="title">支付</div>
          <div class="sub">pay</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/cj4.png" alt />
        <div class="box">
          <div class="title">私有一机64挖</div>
          <div class="sub">Private one machine 64 dig</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      offset1: 0,
      offset2: 0,
      offset3: 0
    };
  },
  mounted() {
    $(window).on('scroll', () => {
      let set1 = $('#changjing1').offset().top - $(window).scrollTop()
      let set2 = $('#changjing2').offset().top - $(window).scrollTop()
      let set3 = $('#changjing3').offset().top - $(window).scrollTop()
      this.offset1 = set1 > 0 ? set1 : 0
      this.offset2 = set2 > 0 ? set2 : 0
      this.offset3 = set3 > 0 ? set3 : 0
    })
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.changjing {
  .flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      height: 79px;
      font-size: 60px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 79px;
      letter-spacing: 4px;
    }
    .sub {
      margin-top: 16px;
      width: 517px;
      height: 37px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: rgba(153, 153, 153, 1);
      line-height: 37px;
      letter-spacing: 2px;
      margin-bottom: 40px;
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .item {
    display: inline-block;
    position: relative;
    overflow: hidden;
    min-width: 500px;
    margin-bottom: -300px;
    .box {
      position: absolute;
      top: 50%;
      left: 36%;
      transform: translate(-50%, -50%);
      &::before {
        content: "";
        width: 6px;
        height: 104px;
        background: rgba(255, 255, 255, 1);
        position: absolute;
        left: -24px;
        top: 8px;
      }
    }
    .title {
      height: 74px;
      font-size: 56px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 74px;
      letter-spacing: 4px;
    }
    .sub {
      height: 37px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: rgba(255, 255, 255, 1);
      line-height: 37px;
      letter-spacing: 2px;
    }
    img {
      max-width: 100%;
    }

    &:nth-of-type(odd) {
      align-self: flex-end;
      .box {
        left: 74%;
        &::before {
          left: auto;
          right: -24px;
        }
      }
      .sub {
        text-align: right;
      }
    }
    &:nth-of-type(4) {
      .box {
        top: 44%;
      }
    }
  }
}
</style>